<template>
    <div>
        <div class="flex justify-between items-center mb-8px">
            <div class="text-lg font-bold">会员权益</div>
            <div v-if="status === 2" class="flex items-center text-white bg-primary rounded-20px px-16px py-8px">
                <el-icon>
                    <Edit />
                </el-icon>
                <div class="text-base ml-4px">编辑会员卡</div>
            </div>
        </div>
        <tableComponent :table-header="tableHeader" :header-cell-style="{'background': '#E8F2FD', 'color': '#000'}" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange">
            <template #empty>
                <div>
                    <img class="w-136px" src="../../../assets/image/no-data.png" />
                    <div class="text-gray text-sm">暂无数据</div>
                </div>
            </template>
            <template #fileUrl>
                <el-table-column prop="fileUrl" label="图片">
                    <template #default="scope">
                        <el-image :src="scope.row.fileUrl" alt="" class="w-40px h-40px" />
                    </template>
                </el-table-column>
            </template>
            <template #operator>
                <el-table-column prop="operator" label="操作">
                    <template #default="scope">
                        <el-popover placement="left" :show-after="500" title="保费数据详情" :width="200" trigger="hover" @show="onPopoverShow(scope.row)">
                            <template #default>
                                <div class="border-t-1 border-b-none border-x-none border-solid border-borderColor pt-4px text-sm">
                                    <div v-if="rightsData.receiveCount  && rightsData.receiveCount !==0" class="flex mb-4px">
                                        <div class="text-lightgray mr-8px">领取份数</div>
                                        <div>{{ rightsData.receiveCount }}</div>
                                    </div>
                                    <div v-if="rightsData.useCount && rightsData.useCount!==0" class="flex mb-4px">
                                        <div class="text-lightgray mr-8px">使用数量</div>
                                        <div>{{ rightsData.useCount }}</div>
                                    </div>
                                    <div v-if="rightsData.leadDealAmount && rightsData.leadDealAmount!==0" class="flex">
                                        <div class="text-lightgray mr-8px">引导成交金额</div>
                                        <div>¥{{ rightsData.leadDealAmount }}</div>
                                    </div>
                                    <div v-if="scope.row.isWriteOff" class="flex">
                                        <div class="text-lightgray mr-8px">核销数量</div>
                                        <div>¥{{ rightsData.writeOffCount }}</div>
                                    </div>
                                    <div v-if="rightsData.buyCount && rightsData.buyCount!==0" class="flex">
                                        <div class="text-lightgray mr-8px">购买数量</div>
                                        <div>¥{{ rightsData.buyCount }}</div>
                                    </div>
                                </div>
                            </template>
                            <template #reference>
                                <el-button type="primary" link>数据</el-button>
                            </template>
                        </el-popover>

                        <el-button v-if="scope.row.isWriteOff" type="primary" link @click="onToDetail(scope.row.id)">核销记录</el-button>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { useRouter } from 'vue-router'
import { getRightsList, getRightsData } from '@/api/membership'
import type { RightsDto, RightsDataDto } from '@/api/membership/type'
import { debounce } from 'lodash'

const props = defineProps({
    cardId: {
        type: Number
    },
    status: {
        type: Number
    }
})

const router = useRouter()

const tableHeader = ref([
    {
        label: '权益名称',
        prop: 'name',
    },
    {
        label: '图片',
        prop: 'fileUrl',
    },
    {
        label: '权益类型',
        prop: 'rightsType',
        map: {
            0: '礼包',
            1: '会员权益',
        }
    },
    {
        label: '介绍',
        prop: 'introduce',
    },
    {
        label: '操作',
        prop: 'operator',
    },
])

const tableData = ref<RightsDto[]>([] as RightsDto[])

const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0
})

const rightsData = ref<RightsDataDto>({} as RightsDataDto)

const loading = ref(true)

const onToDetail = (id: number) => {
    router.push({
        path: '/membership-check-list',
        query: {
            id
        }
    })
}

const getData = async () => {
    const res = await getRightsList({
        id: props.cardId as number,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    })
    tableData.value = res.list
    pageInfo.value.total = res.totalCount as number
}

const handlePageChange = () => {
    
}

const onPopoverShow = debounce(async (row: RightsDto) => {
    loading.value = true
    const res = await getRightsData({
        id: row.id,
        rightsType: row.rightsType
    })
    loading.value = false
    rightsData.value = res
}, 300)



watch(() => props.cardId, () => {
    getData()
})

// onMounted(() => {
//     getData()
// })

</script>
<style lang="scss" scoped></style>
